웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
HTML태그 중에서 리스트 태그인 ul, li에는 여러가지 타입, 종류가 존재합니다. 아래에서 자세히 알아봅니다.
# ul, li 태그 타입 및 스타일 알아보기
먼저 ul과 li 태그는 함께 사용되는 태그로 ul 태그 내부에 여러개의 li 태그를 사용할 수 있습니다. 아래를 봐주세요.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
위와같이 내부에 여러개의 리스트 아이템이 위치하게 됩니다. 이때 각각의 리스트들을 어떻게 보여줄 지 결정할 수 있습니다. 일반적으로 square, circle 등이 자주 사용되지만 다양한 스타일이 존재합니다. 이때 사용 가능한 방법이 type 어트로뷰티를 사용하거나 아니면 css를 사용하는 방법이죠. 먼저 type을 알아보겠습니다.
! 태그에 type 어트로뷰티로 inline으로 코드를 추가하기
아래는 inline 방식으로 type 어트리뷰트를 추가하였습니다. 보시는 것처럼 type="square"라는 코드가 위치해있죠. square가 아닌 다른 값들을 사용할 수 있습니다. 원하는 리스트 타입을 선택하여 적용하시면 됩니다.
<ul type="square">
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
위 코드를 실행하면 어떻게 나타날까요? 바로 아래와 같이 나타나게됩니다.
<ul type="square">
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
다음으로 css의 속성을 사용하는 방법에 대하여 알아보죠.
! CSS의 list-style-type 속성으로 선언하기
이번에는 css를 사용하여 설정해보겠습니다. style 태그에 list-style-type 속성을 사용하고 값으로 disc를 주면 다음과 같을 것입니다.<ul class="test">
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
@ list_style.css
ul.test {
list-style-type: disc;
}
list-style-type: disc;
}
실제로 코드를 동작하면 어떻게 나타나지는 아래에서 확인해보세요.
<ul class="test">
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
<style>
ul.test {
list-style-type: disc;
}
</style>
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
<style>
ul.test {
list-style-type: disc;
}
</style>
disc 타입은 위와 같이 출력되게됩니다.
! 리스트 스타일의 타입 값 알아보기
다양한 값들을 적용했을 때 어떻게 나타나는지 미리 알아두면 편리하겠죠. 아래는 다양한 값을 웹문서에 적용했을때 나타나는 모습입니다.
- disc
- hiragana
- hiragana
- lower-alpha
- lower-alpha
- square
- circle
- decimal
- decimal
- upper-alpha
- upper-alpha
- upper-roman
- upper-roman
- none
여기까지 리스트 스타일을 적용하는 방법과 다양한 스타일을 함께 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
